<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--<html>--%>
<%--<body>--%>
<%--<h2>Hello World!</h2>--%>
<%--<a href="${pageContext.request.contextPath}/loginCheck/login">前往登录</a>--%>
<%--<a href="${pageContext.request.contextPath}/backstage.jsp" id="enterBackstage">进入后台</a>--%>

<%--<%--%>
<%--    System.out.println("mention:" + request.getSession().getAttribute("mention"));--%>
<%--    if(request.getSession().getAttribute("mention") != null) { %>--%>
<%--        <script>--%>
<%--            alert("请先登录!");--%>
<%--        </script>--%>
<%--<% } %>--%>

<%--</body>--%>
<%--</html>--%>

<html>
<head>
    <% String path = request.getContextPath();%>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 引入本地css -->
<%--    <link rel="stylesheet" type="text/css" href="<%=path%>/css/czc_index.css"/>--%>
    <link rel="stylesheet" type="text/css" href="https://www.edisoncgh.com/resources/czc_index.css"/>
    <!-- 引入font-awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">

    <!-- 引入bootst图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="<%=path%>/img/256x.ico" />
    <title>首页</title>
</head>

<body>
<%--未登录提示--%>
<%
    System.out.println("mention:" + request.getSession().getAttribute("mention"));
    if(request.getSession().getAttribute("mention") != null) { %>
        <script>
            alert("请先登录!");
        </script>
<% } %>

<!-- 头部工具栏 -->
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">czcBlog</a>
            </div>

            <div>
                <ul class="nav navbar-nav">
                    <li><a href="${pageContext.request.contextPath}/articleOption/indexArticle"><i class="fa fa-home"></i> 首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/archive.jsp"><i class="fa fa-list-ul"></i> 归档</a></li>
                    <li><a href="${pageContext.request.contextPath}/links.jsp"><i class="fa fa-link"></i> 友链</a></li>
                    <li><a href="${pageContext.request.contextPath}/about.jsp"><i class="fa fa-info-circle"></i> 关于</a></li>

                </ul>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        操作
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="${pageContext.request.contextPath}/backstage.jsp" id="enterBackstage"><i class="fa fa-cog"></i> 后台</a></li>
                        <li><a href="${pageContext.request.contextPath}/loginCheck/login"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                    </ul>
                </li>

            </ul>

            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-primary">检索 <i class="fa fa-search"></i></button>
            </form>

        </div>
    </nav>
</div>

<!-- 抬头内容 -->
<div class="container">
    <div class="page-header text-center">
        <h1>CZC-Blog System</h1>
        <small>A Low-key and Simple Blog</small>
    </div>
</div>

<!-- 页面主体 -->
<div class="container">
    <c:forEach var="article" items="${indexArticleList}">
    <div class="row">
        <!-- 占位 -->
        <div class="col-md-2"></div>

        <!-- 主内容 -->
        <div class="col-md-8 ArticleBox text-center">
            <h2>${article.title}</h2>
            <p>${article.publish_date}</p>
            <p>${article.content}</p>


            <div class="ArticleBox-footer">
                <!-- <p><i class="fa fa-heart" aria-hidden="true"></i> 272</p> -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default"><i class="bi bi-chat-left-dots"></i> 25</button>
                    <a type="button" class="btn btn-primary" href="${pageContext.request.contextPath}/articleOption/articleDetail?art_id=${article.id}" ><i class="bi bi-book"></i> Read Now →</a>
                </div>
            </div>
        </div>

        <!-- 占位 -->
        <div class="col-md-2"></div>
    </div>
    </c:forEach>

<%--    <div class="row">--%>
<%--        <!-- 占位 -->--%>
<%--        <div class="col-md-2"></div>--%>

<%--        <!-- 主内容 -->--%>
<%--        <div class="col-md-8 ArticleBox text-center">--%>
<%--            <h2>标题</h2>--%>
<%--            <p>2021-8-3</p>--%>
<%--            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容...</p>--%>


<%--            <div class="ArticleBox-footer">--%>
<%--                <!-- <p><i class="fa fa-heart" aria-hidden="true"></i> 272</p> -->--%>
<%--                <div class="btn-group">--%>
<%--                    <button type="button" class="btn btn-default"><i class="bi bi-chat-left-dots"></i> 25</button>--%>
<%--                    <button type="button" class="btn btn-primary"><i class="bi bi-book"></i> Read Now →</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>

<%--        <!-- 占位 -->--%>
<%--        <div class="col-md-2"></div>--%>
<%--    </div>--%>

</div>
</body>

<!-- 页尾 -->
<footer class="text-center">

    <ul class="pager">
        <li class="disabled"><a href="#"><i class="fa fa-caret-left"></i> 上一页</a></li>
        <li><a href="#">下一页 <i class="fa fa-caret-right"></i></a></li>
    </ul>

    <!-- 页脚内容 -->
    <div class="container">
        <p>©2021 CZC</p>
    </div>
    <span id="hitokoto">让我想点骚话....</span>
    <script>
        $.ajax({
            type:"get",
            url:"https://v1.hitokoto.cn/",
            success: function(res) {
                document.getElementById("hitokoto").innerText = res.hitokoto;
                // console.log(res.hitokoto);
            },
            error: function() {
                document.getElementById("hitokoto").innerText = "骚话加载失败QAQ";
            }
        });
    </script>
</footer>
</html>
